<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，专注生鲜食品电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,生鲜,食品,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <!-- 引入iconfont图标库 -->
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4032425_17398928.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <style>
    /* 基础重置与通用样式 */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; color: #333; background-color: #f5f5f5; }
    ul, ol { list-style: none; }
    a { text-decoration: none; color: #333; transition: color 0.3s; }
    a:hover { color: #ff6700; }
    img { display: block; width: 100%; height: auto; }
    .wrapper { width: 1200px; margin: 0 auto; }
    .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; }

    /* 快捷导航 */
    .shortcut { height: 36px; background-color: #f5f5f5; line-height: 36px; border-bottom: 1px solid #eee; }
    .shortcut ul { display: flex; }
    .shortcut li { margin-right: 25px; }
    .shortcut li:last-child { margin-left: auto; margin-right: 0; }
    .shortcut a { color: #666; font-size: 12px; }
    .shortcut .icon-mobile-phone { margin-right: 4px; color: #ff6700; }

    /* 头部 */
    .header { height: 100px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
    .logo h1 { width: 150px; height: 40px; }
    .logo a { display: block; width: 100%; height: 100%; font-size: 24px; font-weight: bold; color: #ff6700; text-align: center; line-height: 40px; }
    .nav ul { display: flex; }
    .nav li { margin: 0 18px; }
    .nav a { font-size: 16px; font-weight: 500; padding: 5px 0; position: relative; }
    .nav a:hover::after, .nav a.active::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #ff6700; }
    .search { width: 280px; height: 40px; border: 1px solid #eee; border-radius: 20px; display: flex; align-items: center; padding: 0 15px; }
    .search .icon-search { color: #999; margin-right: 8px; }
    .search input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
    .search input::placeholder { color: #999; }
    .cart { position: relative; }
    .cart a { display: flex; align-items: center; color: #666; }
    .cart .icon-cart-full { font-size: 20px; margin-right: 4px; }
    .cart i { position: absolute; top: -8px; right: -10px; width: 18px; height: 18px; background-color: #ff6700; color: #fff; border-radius: 50%; font-size: 12px; text-align: center; line-height: 18px; font-style: normal; }

    /* Banner区域 */
    .banner { height: 460px; background-color: #f0f0f0; overflow: hidden; }
    .banner .wrapper { position: relative; height: 100%; }
    .subnav { position: absolute; top: 0; left: 0; width: 200px; height: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 20px 0; z-index: 10; }
    .subnav li { padding: 0 20px; height: 42px; line-height: 42px; }
    .subnav li:hover { background-color: #ff6700; }
    .subnav h4 { display: inline-block; color: #fff; font-size: 16px; font-weight: normal; margin-right: 10px; }
    .subnav li a:not(:first-child) { color: #fff; font-size: 12px; margin: 0 6px; }
    .subnav .icon-arrow-right-bold { float: right; color: #fff; font-size: 12px; margin-top: 15px; }
    .pic { height: 100%; }
    .pic li { height: 100%; }
    .pic img { height: 100%; object-fit: cover; }
    .banner ol { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
    .banner ol li { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; }
    .banner ol li.active { background-color: #fff; }

    /* 通用标题 */
    .title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
    .title h3 { font-size: 24px; color: #333; position: relative; padding-right: 15px; }
    .title h3::after { content: ""; position: absolute; top: 50%; right: 0; width: 4px; height: 20px; background-color: #ff6700; transform: translateY(-50%); }
    .title p { font-size: 12px; color: #999; margin-left: 10px; }
    .title .all { font-size: 14px; color: #666; display: flex; align-items: center; }
    .title .all .icon-arrow-right-bold { margin-left: 5px; font-size: 12px; }

    /* 新鲜好物 */
    .goods { padding: 40px 0; background-color: #fff; }
    .goods .bd { display: flex; justify-content: space-between; }
    .goods .bd li { width: 280px; background-color: #f9f9f9; border-radius: 8px; overflow: hidden; transition: transform 0.3s; }
    .goods .bd li:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
    .goods .bd li img { height: 220px; object-fit: cover; }
    .goods .price { padding: 15px; }
    .goods .price p:first-child a { font-size: 16px; color: #333; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .goods .price p:last-child { font-size: 18px; color: #ff6700; font-weight: bold; }

    /* 生鲜模块 */
    .fresh { padding: 40px 0; background-color: #fff; }
    .fresh .title { margin-bottom: 30px; }
    .fresh .title ul { display: flex; margin-left: 20px; }
    .fresh .title ul li { margin: 0 15px; }
    .fresh .title ul a { font-size: 14px; color: #666; padding: 3px 8px; border-radius: 12px; }
    .fresh .title ul a:hover, .fresh .title ul a.active { background-color: #ff6700; color: #fff; }
    .fresh .content { display: flex; gap: 20px; }
    .fresh .left { width: 240px; }
    .fresh .left img { border-radius: 8px; object-fit: cover; }
    .fresh .right { flex: 1; }
    .fresh .right ul { display: flex; flex-wrap: wrap; gap: 20px; }
    .fresh .right li { width: calc((100% - 60px) / 4); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s; background-color: #f9f9f9; border-radius: 8px; padding: 15px; }
    .fresh .right li:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
    .fresh .right li img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }
    .fresh .right li p { font-size: 14px; color: #333; margin-bottom: 10px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; display: -webkit-box; }
    .fresh .right li span { font-size: 16px; color: #ff6700; font-weight: bold; }

    /* 底部 */
    .footer { background-color: #333; color: #fff; padding: 60px 0 30px; }
    .service { margin-bottom: 40px; }
    .service ul { display: flex; justify-content: center; gap: 80px; }
    .service li a h5 { font-size: 18px; color: #fff; font-weight: normal; }
    .service li a h5:hover { color: #ff6700; }
    .help { display: flex; justify-content: space-between; padding-bottom: 40px; border-bottom: 1px solid #444; margin-bottom: 30px; }
    .help dl { width: 150px; }
    .help dt { font-size: 16px; color: #fff; margin-bottom: 20px; }
    .help dd { margin-bottom: 12px; }
    .help dd a { color: #999; font-size: 12px; }
    .help dd a:hover { color: #ff6700; }
    .help .right { display: flex; gap: 40px; }
    .help .right li { text-align: center; }
    .help .right li img { width: 80px; height: 80px; margin-bottom: 10px; }
    .help .right li p { font-size: 12px; color: #999; }
    .copyright { text-align: center; }
    .copyright p { font-size: 12px; color: #999; margin-bottom: 10px; }
    .copyright a { color: #999; margin: 0 5px; }
    .copyright a:hover { color: #ff6700; }
    /* 最新专题模块（极简带图标版） */
.latest-topic {
  padding: 30px 0;
  background-color: #fff;
  margin-bottom: 20px;
}
.topic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.topic-header h3 {
  font-size: 24px;
  color: #333;
  position: relative;
  padding-right: 10px;
}
.topic-header h3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 3px;
  height: 18px;
  background-color: #ff6700;
  transform: translateY(-50%);
}
.topic-header .all {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
}
.topic-header .all .icon-arrow-right-bold {
  margin-left: 5px;
  font-size: 12px;
}
.topic-list {
  display: flex;
  justify-content: space-between;
}
.topic-list li {
  width: calc(100% / 3 - 10px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.topic-list li img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.topic-meta {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 12px;
  color: #999;
}
.topic-meta i.iconfont {
  color: #ff6700;
  margin-right: 3px;
}
  </style>
</head>
<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class="iconfont icon-mobile-phone"></span> 手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="./index.html">小兔鲜儿</a></h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="#" class="active">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">家居</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="25216950516 赵宇">
    </div>
    <div class="cart">
      <a href="#">
        <span class="iconfont icon-cart-full"></span>
        <i>22</i>
      </a>
    </div>
  </div>

  <!-- Banner区域 -->
  <div class="banner">
    <div class="wrapper">
      <ul class="subnav">
        <li>
          <a href="#"><h4>生鲜果蔬</h4></a>
          <a href="#">水果</a>
          <a href="#">蔬菜</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>美食推荐</h4></a>
          <a href="#">面包</a>
          <a href="#">干果</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>数码电子</h4></a>
          <a href="#">手机</a>
          <a href="#">电脑</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>家庭电器</h4></a>
          <a href="#">电视</a>
          <a href="#">冰箱</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>厨房用品</h4></a>
          <a href="#">厨房电器</a>
          <a href="#">餐具</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>居家生活</h4></a>
          <a href="#">床品</a>
          <a href="#">四件套</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>洗护美妆</h4></a>
          <a href="#">洗发</a>
          <a href="#">洁面</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>孕婴用品</h4></a>
          <a href="#">奶粉</a>
          <a href="#">玩具</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>服饰穿搭</h4></a>
          <a href="#">女装</a>
          <a href="#">男装</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
        <li>
          <a href="#"><h4>日用杂货</h4></a>
          <a href="#">户外</a>
          <a href="#">图书</a>
          <a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
        </li>
      </ul>
      <ul class="pic">
        <li><img src="./img/banner1.png" alt="生鲜促销"></li>
      </ul>
      <ol>
        <li class="active"><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ol>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <div class="title">
      <h3>新鲜好物</h3>
      <p>新鲜出炉 品质靠谱</p>
      <a class="all" href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
    </div>
    <ul class="bd">
      <li>
        <img src="./img/banner1.png" alt="防护口罩">
        <div class="price">
          <p><a href="#">KN95级莫兰迪色防护口罩</a></p>
          <p>￥79</p>
        </div>
      </li>
      <li>
        <img src="./img/banner1.png" alt="普洱茶盒">
        <div class="price">
          <p><a href="#">紫檀外独板三层普洱茶盒</a></p>
          <p>￥566</p>
        </div>
      </li>
      <li>
        <img src="./img/banner1.png" alt="记事本">
        <div class="price">
          <p><a href="#">法拉蒙高颜值记事本可定制</a></p>
          <p>￥58</p>
        </div>
      </li>
      <li>
        <img src="./img/banner1.png" alt="布艺沙发">
        <div class="price">
          <p><a href="#">科技布布艺沙发</a></p>
          <p>￥3579</p>
        </div>
      </li>
    </ul>
  </div>

  <!-- 生鲜模块 -->
  <section class="fresh wrapper">
    <div class="title">
      <h3>生鲜</h3>
      <ul>
        <li><a href="#" class="active">热门</a></li>
        <li><a href="#">蔬菜</a></li>
        <li><a href="#">肉禽蛋</a></li>
        <li><a href="#">水果</a></li>
        <li><a href="#">海鲜</a></li>
        <li><a href="#">零食</a></li>
        <li><a href="#">饮料</a></li>
      </ul>
      <a class="all" href="#">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
    </div>
    <div class="content">
      <div class="left">
        <img src="./img/banner1.png" alt="生鲜馆广告">
      </div>
      <div class="right">
        <ul>
          <li>
            <img src="./img/banner1.png" alt="双味千层">
            <p>双味千层，手抓饼烤肉组合240g/袋 4片装<br>加热即食</p>
            <span>¥ 89.99</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="红糖馒头">
            <p>云南甘蔗慢熬红糖馒头220g/袋 5个装<br>加热即食</p>
            <span>¥ 9.99</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="日式小圆饼">
            <p>日式风味小圆饼圆形【海盐味】<br>糖果零食</p>
            <span>¥ 588.00</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="全麦小面包">
            <p>全麦奶油浓香小面包50g*12袋<br>美味西点</p>
            <span>¥ 69.00</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="五福摩提">
            <p>秘制外皮五福摩提大福点心150g/盒<br>美味西点</p>
            <span>¥ 39.99</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="蜂蜜柚子茶">
            <p>水果面膜韩国蜂蜜柚子茶560g/瓶<br>冲调饮品</p>
            <span>¥ 89.99</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="巧克力礼盒">
            <p>浓情比利时巧克力礼盒装205克/盒<br>糖果零食</p>
            <span>¥ 120.00</span>
          </li>
          <li>
            <img src="./img/banner1.png" alt="抹茶蛋糕">
            <p>抹茶奶油小蛋糕礼盒装220克/盒<br>美味西点</p>
            <span>¥ 60.00</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
<!-- 最新专题模块（） -->
<div class="wrapper latest-topic">
  <div class="topic-header">
    <h3>最新专题</h3>
    <a href="#" class="all">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
  </div>
  <ul class="topic-list">
    <li>
      <img src="./img/banner1.png" alt="美食专题">
      <div class="topic-meta">
        <span><i class="iconfont "></i> 1220</span>
        <span><i class="iconfont "></i> 1800</span>
        <span><i class="iconfont "></i> 246</span>
      </div>
    </li>
    <li>
      <img src="./img/banner1.png" alt="饮品专题">
      <div class="topic-meta">
        <span><i class="iconfont "></i> 1220</span>
        <span><i class="iconfont "></i> 1800</span>
        <span><i class="iconfont "></i> 246</span>
      </div>
    </li>
    <li>
      <img src="./img/banner1.png" alt="甜点专题">
      <div class="topic-meta">
        <span><i class="iconfont "></i> 1220</span>
        <span><i class="iconfont "></i> 1800</span>
        <span><i class="iconfont "></i> 246</span>
      </div>
    </li>
  </ul>
</div>
  <!-- 底部 -->
  <div class="footer">
    <div class="wrapper">
      <div class="service">
        <ul>
          <li><a href="#"><h5>价格亲民</h5></a></li>
          <li><a href="#"><h5>物流快捷</h5></a></li>
          <li><a href="#"><h5>品质新鲜</h5></a></li>
          <li><a href="#"><h5>售后无忧</h5></a></li>
        </ul>
      </div>
      <div class="help">
        <dl>
          <dt>购物指南</dt>
          <dd><a href="#">购物流程</a></dd>
          <dd><a href="#">支付方式</a></dd>
          <dd><a href="#">售后规则</a></dd>
        </dl>
        <dl>
          <dt>配送方式</dt>
          <dd><a href="#">配送运费</a></dd>
          <dd><a href="#">配送范围</a></dd>
          <dd><a href="#">配送时间</a></dd>
        </dl>
        <dl>
          <dt>关于我们</dt>
          <dd><a href="#">平台规则</a></dd>
          <dd><a href="#">联系我们</a></dd>
          <dd><a href="#">问题反馈</a></dd>
        </dl>
        <dl>
          <dt>售后服务</dt>
          <dd><a href="#">售后政策</a></dd>
          <dd><a href="#">退款说明</a></dd>
          <dd><a href="#">取消订单</a></dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd><a href="#">在线客服 <span class="iconfont icon-customer-service"></span></a></dd>
          <dd><a href="#">客服电话 400-0000-000</a></dd>
          <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
        </dl>
        <div class="right">
          <ul>
            <li>
              <img src="./img/banner1.png" alt="微信公众号">
              <p>微信公众号</p>
            </li>
            <li>
              <img src="./img/banner1.png" alt="APP下载二维码">
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <p>
          <a href="#">关于我们</a> &nbsp|&nbsp
          <a href="#">帮助中心</a> &nbsp|&nbsp
          <a href="#">售后服务</a> &nbsp|&nbsp
          <a href="#">配送与验收</a> &nbsp|&nbsp
          <a href="#">商务合作</a> &nbsp|&nbsp
          <a href="#">搜索推荐</a>
        </p>
        <p><a href="#">@CopyRight © 小兔鲜</a></p>
        <p>学号：25216950516 | 姓名：赵宇</p>
      </div>
    </div>
  </div>
</body>
</html>